<template>
    <div v-if="list && list.length>0">
        <div v-for="(e,i) in list" :key="i">
              <el-dialog :visible.sync="e.dia"  :append-to-body="true" class="comDialog" :close-on-click-modal="false">
                <div  :style="{'padding-top':i*10+'px','margin-left':i*10+'px'}">
                    <div class="content">
                        <div class="flex-row header align-center ">
                            <div class="title flex-1">报警警报{{list.length}}</div>
                            <div style="cursor: pointer;" @click="closeDia(e)"><img style="padding-right:10px;" src="../../views/bigdata/static/bigdata/close.png" alt=""></div>
                        </div>
                        <div class="body">
                            <div class="b_content flex-col">
                                <div class="flex-row item name"><img src="../../views/bigdata/static/bigdata/book.png" style="padding-right:5px;" alt="">{{e.device_title}}/{{e.group_title}}</div>
                                <div class="flex-row item">{{e.name}}</div>
                                <div class="flex-row item">{{e.content}}</div>
                                <!-- <audio v-if="e.audio_url" :src="e.audio_url" :ref="'audio'+e.warning_id" controls autoplay muted></audio> -->
                                <div class="flex-row item" v-if="e.image_urls">
                                    <img :src="ee" style="width:100%;" alt="" v-for="(ee,ii) in e.image_urls" :key="ii">
                                </div>
                                <div class="flex-row item" v-if="e.video_urls">
                                    <JessibucaDemo :control_Btn="false" :screen_width="480" :stop_video="false" :screen_height="480" :videoUrl="ee" :deviceId="e.device_id" v-for="(ee,ii) in e.video_urls" :key="ii"/>
                                </div>
                            </div>
                           <div style="width:100%;" class="flex-row align-center justify-center">
                            <span slot="footer" class="dialog-footer flex-row " >
                                <el-button class="colorBtn big flex-1" type="primary" @click="closeDia(e)">确定</el-button>
                                <el-button class="colorBtn big flex-1 ghost" @click="closeDia(e)">取 消</el-button>
                                </span>
                           </div>
                        </div>
                    </div>
                </div>

              </el-dialog>
        </div>
    </div>
</template>
<script>
import {
    warning_show,warning_close
} from "@/api/warn";
import JessibucaDemo from '@/components/JessibucaDemo.vue'

export default {
    components: {
        JessibucaDemo
    },
    data(){
        return{
            // list:[{'id':1,'dia':true},{'id':2,'dia':true},{'id':3,'dia':true}],
            list:[],
            myInterval:null
        }
    },
    mounted(){
        this.fetchData()
        if (this.myInterval) {
          clearInterval(this.myInterval);
        }
        let _that = this
        this.myInterval = setInterval(() => {
          _that.fetchData()
        }, 5000)
    },
    destroyed(){
      clearInterval(this.myInterval);
    },
    methods:{
        audioJs(url) {
            var audio = new Audio();
            audio.src = url;
            // audio.loop = true; //设置循环播放
            audio.addEventListener("canplaythrough", event => {
            /* 音频可以播放；如果权限允许则播放 */
                audio.play();
            })
            // audio.pause(); //暂停
        },
        closeDia(e){
            this.$set(e,'dia',false)
            warning_close({id:parseInt(e.warning_id)}).then(res=>{})
        },
        fetchData(){
            warning_show().then(res=>{
                let result = res
                let arr = this.compareArray(this.list,result,'warning_id');
                if(arr.add && arr.add.length > 0){
                    let addArr = arr.add
                    addArr.forEach(e=>{
                        this.$set(e,'dia',true)
                        if(e.image_urls){
                            this.$set(e,'image_urls',e.image_urls.split(','))
                        }
                        if(e.video_urls){
                            this.$set(e,'video_urls',e.video_urls.split(','))
                        }
                        this.list.push(e)
                        if(e.audio_url){
                           this.audioJs(e.audio_url)
                        }
                    })
                }
                // this.list = result
            })
        },
       compareArray(oldData,newData,column){
            let compareResult = {
                "delete":[],
                "add":[],
                "same":[],
            }
            let type = arguments.length;
            if(type == 3){  // 如果是比较的数组元素是Object
                for(let i=0;i<newData.length;i++){
                    let newObj = oldData.find((item,index)=>{
                        return item[column] == newData[i][column];
                    })
                    if(!newObj){ // 获取新增的元素
                        compareResult.add.push(newData[i]);
                    }else{ // 获取相同的元素
                        compareResult.same.push(newData[i]);
                    }
                }

                // 获取删除的元素
                for(let i=0;i<oldData.length;i++){
                    let delObj = newData.find((item,index)=>{
                        return item[column] == oldData[i][column]
                    })
                    if(!delObj){
                        compareResult.delete.push(oldData[i]);
                    }
                }

            }else if(type == 2){  // 如果是比较的数组元素是基本类型

                for(let i=0;i<newData.length;i++){
                    let newObj = oldData.find((item,index)=>{
                        return item == newData[i];
                    })
                    if(!newObj){ // 获取新增的元素
                        compareResult.add.push(newData[i]);
                    }else{ // 获取相同的元素
                        compareResult.same.push(newData[i]);
                    }
                }

                // 获取删除的元素
                for(let i=0;i<oldData.length;i++){
                    let delObj = newData.find((item,index)=>{
                        return item == oldData[i]
                    })
                    if(!delObj){
                        compareResult.delete.push(oldData[i]);
                    }
                }
            }
            return compareResult;
        }
    },
    beforeDestroy(){

    },


}
</script>
<style scoped lang="scss">
.comDialog{
    ::v-deep.el-dialog__header { display: none; }
    ::v-deep.el-dialog__body { padding: 0; }
    ::v-deep .el-dialog{ background: transparent;
        .content { border-radius: 3px;background: #ffffff; padding: 20px; width: 520px;
            .header { padding: 10px 0;border-bottom:1px solid #999;
                .title { font-size: 24px; color: #000;
                   // &::before { content: ''; width: 4px; height: 19px; background:#ffffff; display: inline-block; margin-right: 10px ; }
                }
            }
            .body { padding: 20px 0;
                .b_content { color: #333; padding-bottom: 20px;
                    .item { padding-bottom: 10px }
                    .name { font-size: 18px; font-weight: bold; }
                }
                .dialog-footer { width: 80%; }
            }
        }
    }
}
</style>
